<template>
	<div class="container">
		<!-- 头部标题栏 -->
		<h3 class="header-title clearfix">
			<span></span>
			<p>{{$store.getters.getPageTitle}}</p>
		</h3>
		<!-- 搜索栏 -->
		<comSearch :options="search" @searchList="searchData"></comSearch>
		<!-- 数据列表 -->
		<comTable :options="tableData" 
			@openDetailsDialog="function(data){return openDetailsDialog('明细',data)}"
			@openRemarksDialog="function(data){return openDetailsDialog('备注',data)}"
			@addRemarks="addRemarks" @openResume="openResume" @openUpload="openUpload"
			@putBack="putBack"
		></comTable>
		<!-- 修改明细弹窗 -->
		<comDetails :options="detailsData" @getDetailsList="getDetailsList"></comDetails>
		<!-- 新增备注弹窗 -->
		<perMgAddRemarks ref="remark" :options="remarksData" @subRemarks="subRemarks"></perMgAddRemarks>
		<!-- 简历模板弹窗 -->
		<comResume :options="remuseData" ></comResume>
		<!-- 上传简历弹窗 -->
		<matMgUploadResume :options="uploadData" @updateView="updateView"></matMgUploadResume>
		<!-- 分页器 -->
		<div class="pageBox">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="pageChange"
				:current-page="cur"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
				background
			></el-pagination>
		</div>
	</div>
</template>

<script>
export default{
	components:{
		comSearch: () => import("../commonComponents/comSearch.vue"),
		comTable: () => import("../commonComponents/comTable.vue"),
		comResume: () => import("../commonComponents/comResume.vue"),
		comDetails: () => import("../commonComponents/comDetails.vue"),
		perMgAddRemarks: () => import("../pageComponents/perMgAddRemarks.vue"),
		matMgUploadResume: () => import("../pageComponents/matMgUploadResume.vue"),
	},
	data(){
		return {
			/* 搜索列表 */
			search: {
				userShow: true,												//姓名
				telShow: true,												//电话号码
				tagShow: true,												//标注
				workStatusShow: true,										//工作状态
				postShow: true,												//岗位
				projectShow: true,											//项目归属
				entryShow: true,											//录入时间
				data: {},													//搜索数据
			},
			tableData:{
				list:[
					{title: '标注',prop: 'arrange',isClick: false},
					{title: '姓名',prop: 'name',isClick: false},
					{title: '手机号',prop: 'telnum',isClick: false},
					{title: '岗位',prop: 'position',isClick: false},
					{title: '工作状态',prop: 'workStatus',isClick: false},
					{title: '项目归属',prop: 'projectBelongs',isClick: false},
					{title: '最新备注',prop: 'newRemarks',isClick: true,eventName: 'addRemarks'},
					{title: '历史备注',prop: 'oldRemarks',isClick: false},
					{title: '录入时间',prop: 'createTime',isClick: false},
				],
				noResume: true,		//简历
				resumeList:[
					{name:'查看简历',isBtn:false,title:'openResume'},
					{name:'上传简历',isBtn:false,title:'openUpload'},
				],
				noOperation: true,	//有操作项
				operation:[			//操作项内容
					{name:'修改明细查看',isBtn:false,title:'openDetailsDialog'},
					{name:'所有备注查看',isBtn:false,title:'openRemarksDialog'},
					{name:'放回原处',isBtn:false,title:'putBack'},
				],
				data:[
					/* {
						arrange: '已安排',
						name: '徐凤年',
						telnum: '156565656',
						position: '月嫂',
						workStatus: '在职',
						projectBelongs: '发财网络科技有限公司',
						newRemarks: 'xxx',
						oldRemarks: 'xxx',
						createTime: '2020-1-55',
						resume: '查看简历'
					}, */
				]
			},
			/* 明细弹窗数据 */
			detailsData:{
				showDialog: false,										//显示弹窗
				title: '修改明细',										//标题
				list:[														//数据列表
					/* {	
						title: '2020年09月11日10:41:54',						//标题
						content: '',										//内容
					}, */
				],
				userInfo: {},												//当前操作人员数据
			},
			/* 添加备注弹窗 */
			remarksData:{
				showDialog: false,											//显示弹窗
				title: '添加备注',											//标题
			},
			/* 简历模板数据 */
			remuseData:{
				showDialog: false,											//显示弹窗
				title: '简历列表',											//标题
				list: [
					{
						title: '一、简历',
					},
					{
						title: '二、简历',
					},
					{
						title: '三、简历',
					}
				]
			},
			uploadData: {
				showDialog: false,											//显示弹窗
				title: '上传简历',											//标题
			},
			
			
			/* 分页功能数据 */
			cur:1,
			pageSize: 10,
			totalNum: 0,		//总共有多少条数据,根据这个数据去适配页数
		}
	},
	created() {
		this.init();
	},
	methods:{
		//初始化
		init(){
			localStorage.setItem('pageTitle','回收站');
			this.$store.dispatch('setPageTitle',localStorage.getItem('pageTitle'));
			this.getDataList();
		},
		//获取数据列表
		getDataList(form){
			let params = {
				pageNum: this.cur,
				pageSize: this.pageSize
			}
			if(form){params = Object.assign(params,form)};
			this.$telAxios.post('/v1/librarian/selectHszLibrarianList',params).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					let result = res.data.data;
					this.totalNum = Number(result.totalNum);
					result.llist.forEach(item => {
						item.resume = '查看简历';
						if(item.plist.length == 0){
							item.newRemarks = '-';
						}else if(item.plist.length == 1){
							item.newRemarks = item.plist[0].comment;
						}else if(item.plist.length >= 2){
							item.newRemarks = item.plist[0].comment;
							item.oldRemarks = item.plist[1].comment;
						}
					});
					this.tableData.data = result.llist;
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
		},
		//条件搜索
		searchData(data){
			console.log(data);
			this.search.data = data;
			this.getDataList(data);
		},
		//打开修改明细和备注弹窗
		openDetailsDialog(type,data){
			console.log(type);
			console.log(data);
			this.detailsData.type = type;
			this.detailsData.userInfo = data;
			this.detailsData.showDialog = true;
			this.detailsData.title = type == '明细'?'修改明细':'备注';
			this.getDetailsList({cur:1,pageSize:10});
		},
		//获取明细/备注列表
		getDetailsList(obj){
			let params = {
				librarianId: this.detailsData.userInfo.librarianId,
				pageNum: obj.cur,
				pageSize: obj.pageSize
			}
			let url = this.detailsData.type == '明细'?'/v1/librarian/selectDetailBylibrarianId':'/v1/librarian/selectPostscriptVoList';
			this.$telAxios.post(url,params).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					let result = res.data.data;
					if(this.detailsData.type == '明细'){
						result.dlist.forEach(item => {
							let mold = '修改类型：';
							if(item.grade == 1){
								mold += '姓名';
							}else if(item.grade == 2){
								mold += '手机号';
							}else if(item.grade == 3){
								mold += '岗位';
							}else if(item.grade == 4){
								mold += '工作状态';
							}else if(item.grade == 5){
								mold += '项目归属';
							}else if(item.grade == 6){
								mold += '标注';
							}else if(item.grade == 7){
								mold += '备注';
							}
							item.comment = mold + '<br/>' + ' 修改前内容：' + item.changedFront + '<br/>' + ' 修改后内容：' + item.changedQueen;
							if(item.grade == 8){
								item.comment = '操作类型：上传一条简历' + '<br/>' +  item.changedQueen;
							}
						})
						this.detailsData.list = result.dlist;
					}else{
						this.detailsData.list = result.plist;
					}
					this.detailsData.totalNum = Number(result.totalNum);
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
		},
		//打开新增备注模板
		addRemarks(data){
			console.log(data);
			this.remarksData.showDialog = true;
			this.remarksData.userInfo = data;
		},
		//打开简历模板
		openResume(data){
			console.log(data);
			this.remuseData.showDialog = true;
			this.$telAxios.post('/v1/librarian/selectFlexibileResumeList',{librarianId: data.librarianId}).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					this.remuseData.list = res.data.data;
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
		},
		//提交新增备注数据
		subRemarks(data){
			console.log(data);
			let params = {
				librarianId: this.remarksData.userInfo.librarianId,
				changedFront: this.remarksData.userInfo.newRemarks,
				changedQueen: data,
				grade: 7
			}
			this.$telAxios.post('/v1/librarian/insertDetail',params).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					this.$message({
						message: '新增备注成功！',
						type: 'success'
					})
					this.$refs.remark.clearData();
					this.searchData(this.search.data);
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
			this.remarksData.showDialog = false;
		},
		//打开上传弹窗
		openUpload(data){
			console.log(data);
			this.uploadData.showDialog = true;
			this.uploadData.userInfo = data;
			this.uploadData.fileList = [];
		},
		//上传完简历之后更新视图
		updateView(msg){
			this.uploadData.showDialog = false;
			let params = {
				librarianId: this.uploadData.userInfo.librarianId,
				changedFront: '上传一条简历',
				changedQueen: '上传的简历名为：'+msg,
				grade: '8'
			}
			this.$telAxios.post('/v1/librarian/insertDetail',params).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
			this.searchData(this.search.data);
		},
		//提交数据将资料放回原处
		putBack(data){
			console.log(data);
			this.$confirm('是否确认将该资料放回原处', '放回原处', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				this.$telAxios.post('/v1/librarian/updateLibrarianRecycleBin',{librarianId: data.librarianId,recycleBin:2}).then(res => {
					console.log(res);
					if(res.data.code === 1000){
						this.$message({
							message: '放回原处操作成功！',
							type: 'success'
						})
						this.searchData(this.search.data);
					}else{
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
				
			},() => {
				console.log('取消成功！');
			})
		},
		
		//当前页是第几页,点击的第几页的时候调用这个函数
		pageChange(p) {
			// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
			// 然后把这个当前页数转换成字符串形式赋值给page，
			// 然后把page这个参数传给search这个方法
			console.log(p);
			this.cur = p;
			this.searchData(this.search.data);
		},
		//每页有多少条,10,20,50等,点击选择的时候调用这个方法
		handleSizeChange (val) {
			console.log(val);
			this.pageSize = val;
			this.searchData(this.search.data);
		},
	}
}
</script>

<style scoped="scoped">
.container{background-color: #fff;height: 100%;padding-left: 20px;}
.header-title{padding: 0 0 20px 0;border-bottom: 1px solid #D2D2D2;}
.header-title span{width: 15px;float: left;height: 30px;background-color: #0064E4;margin-right: 20px;}
.header-title p{font-weight: bold;line-height: 30px;float: left;}
.pageBox{margin-top: 20px;}
</style>
